<template>
  <div
    @click="
      () => {
        if (!disabled) visible = true;
      }
    "
    style="width: 100%"
  >
    <slot>
      <a-input
        v-model="inputValue"
        placeholder="请选择产品"
        :disabled="disabled"
      />
    </slot>
  </div>
  <a-modal title="选择产品" v-model:visible="visible" :width="800">
    <template #footer>
      <a-space>
        <a-button @click="visible = false">取消</a-button>
      </a-space>
    </template>
    <div>
      <a-space :size="30">
        <div style="display: flex">
          <a-space>
            <div>物料编码：</div>
            <a-input-search
              v-model="numberVal"
              placeholder="请输入物料编码"
              search-button
              @search="search"
            />
          </a-space>
        </div>
        <div style="display: flex">
          <a-space>
            <div>物料名称：</div>
            <a-input-search
              v-model="nameVal"
              placeholder="请输入物料名称"
              search-button
              @search="search"
            />
          </a-space>
        </div>
      </a-space>
    </div>
    <div style="height: 20px" />

    <tableTurn :tableData="getData" ref="tableRef">
      <a-table-column
        align="center"
        :width="200"
        title="物料编码"
        data-index="number"
      />
      <a-table-column
        align="center"
        :width="150"
        title="物料名称"
        data-index="name"
      />

      <a-table-column
        align="center"
        :width="150"
        title="规格型号"
        data-index="spec"
      />
      <a-table-column :width="130" title="材料属性" align="center">
        <template #cell="{ record }">
          {{
            record.attribute === 1
              ? '自制'
              : record.attribute === 2
              ? '委外'
              : record.attribute === 3
              ? '虚拟'
              : '采购'
          }}
        </template>
      </a-table-column>
      <a-table-column
        align="center"
        data-index="basicName"
        :width="100"
        title="基本单位"
      />
      <a-table-column
        align="center"
        :width="100"
        title="所属分类"
        data-index="spec"
      />
      <a-table-column align="center" :width="100" title="是否启用">
        <template #cell="{ record }">
          <div
            :class="record.enable === 1 ? 'state-item-Y' : 'state-item-N'"
            class="state-item"
          >
            {{ record.enable === 1 ? '是' : '否' }}
          </div>
        </template>
      </a-table-column>
      <a-table-column
        align="center"
        :width="200"
        title="备注"
        data-index="remark"
      >
      </a-table-column>
      <a-table-column align="center" :width="100" fixed="right" title="操作">
        <template #cell="{ record }">
          <a-link @click="choice(record)">选择</a-link>
        </template>
      </a-table-column>
    </tableTurn>
  </a-modal>
</template>

<script setup lang="ts">
  import { reactive, onMounted, ref, nextTick, useSlots } from 'vue';
  import { Message } from '@arco-design/web-vue';
  import { GetMaterialList } from '@/api/inventory-management/material-management';

  const props = withDefaults(
    //参数说明
    defineProps<{
      type?: number;
      disabled?: boolean;
    }>(),
    {
      disabled: false,
    }
  );
  let inputValue = ref();
  defineExpose({ inputValue });
  let getMaterialId = ref();
  let numberVal = ref(''); // 物料编码搜索值
  let nameVal = ref(''); // 物料编码搜索值
  const getData = async (pageData?: any) => {
    try {
      const data: any = {};
      if (numberVal.value !== '') data.code = numberVal.value;
      if (nameVal.value !== '') data.name = nameVal.value;
      if (getMaterialId.value !== '') data.materialId = getMaterialId.value;
      const res = await GetMaterialList({
        ...pageData,
        ...data,
      });
      if (getMaterialId.value) {
        res.content = res.content.filter(
          (i: any) => i.materialId === getMaterialId.value
        );
      }
      return Promise.resolve(res);
    } catch (error: unknown) {
      console.log(error);
    }
  };

  let visible = ref(false);

  let emit = defineEmits(['choice']);
  let choice = async (item: any) => {
    if (item.attribute === 4 && props.type === 1) {
      Message.error('关联产品的材料属性不可以是采购');
      return (visible.value = false);
    }
    emit('choice', item);
    inputValue.value = item.name;
    visible.value = false;
  };
  let tableRef = ref();
  // 点击搜索按钮
  const search = () => {
    tableRef.value.loadData();
  };
</script>

<style scoped></style>
